<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../index.css">
<div class="container-fluid d-flex flex-column" style="overflow:hidden; height:100vh;" id="app">
    <div class="container-fluid fixed-top position-sticky p-0 m-0" style="height:250px;">
        <div class="row pt-2" style="height:150px;">
            <!-- <div class="col-1 text-end">原文：</div> -->
            <div class="col h-100"><textarea class="form-control form-control-sm" style="resize:none; height:100%;" v-model="strUrl" placeholder="这里输入url"></textarea></div>
        </div>
        <div class="row mt-2" style="height:40px;">
            <div class="col-2 h-100"><button type="button" class="btn btn-primary btn-sm" @click="calc">Url参数解析</button></div>
        </div>
        <div class="row mt-2" style="height:40px;" v-if="parse.f==1">
            <div class="col input-group h-100">
                <span class="input-group-text">URL</span>
                <input type="text" class="form-control form-control-sm" v-model="parse.url" disabled>
            </div>
        </div>
    </div>
    <div class="row" style="flex:1; height:100vh; overflow-y:auto;" v-if="parse.f==1 && parse.params.length > 0">
        <div class="col table-responsive h-100">
            <table class="table table-striped h-100">
                <thead>
                    <tr>
                        <td>键</td>
                        <td>值</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(param, i) in parse.params">
                        <td>{{param.key}}</td>
                        <td style="user-select:all;">{{param.value}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row fixed-bottom position-sticky align-items-center" style="height:40px;" v-if="parse.f==1 && parse.params.length > 0">
        <div class="col text-end h-100 justify-content-center">
            <button type="button" class="btn btn-primary btn-sm" @click="switchFormat('json')">将参数复制为json格式</button>
        </div>
    </div>
</div>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/vue/dist/vue.global.prod.js"></script>
<script>
// parse: {f: 0, url: 'xxxx', params: [{ key: '', value: '' }]}
const app = {
    data() {
        return {
            strUrl: '',
            parse: {f: 0, url: '', params: []}
        }
    },
    created() {
        document.addEventListener('keyup', (e) => {
            if (e.ctrlKey && e.shiftKey && (e.key == 'I' || e.key ==  'i')) {
                parent.devTools();
            }
            if (e.ctrlKey && (e.key == 'r' || e.key == 'R')) {
                parent.refresh();
            }
        });
    },
    methods: {
        calc() {
            this.parse = {f: 0, url: '', params: []};
            let url = ''
            try {
                url = new URL(this.strUrl)
            } catch (error) {
                console.error(error);
                alert('不正确的URL')
                return;
            }
            // console.info(url)
            this.parse.url = url.origin + url.pathname
            // console.info(url.search)
            let kv = url.search.slice(1).split('&')
            for(let p of kv) {
                if(undefined == p || '' == p) continue;
                let j = {}
                j.key = p.split('=')[0]
                j.value = p.split('=')[1]
                this.parse.params.push(j)
            }
            this.parse.f = 1;
        },
        switchFormat(format) {
            let url = new URL(this.strUrl)
            let kv = url.search.slice(1).split('&')
            switch (format) {
                case 'json':
                    let j = formatJson(kv)
                    navigator.clipboard.writeText(JSON.stringify(j));
                    parent.notification({title: 'note', body: 'json复制成功'})
                    break;
                default:
                    break;
            }
        }
    }
}
Vue.createApp(app).mount('#app');
function formatJson(kv) {
    let j = {}
    for(let p of kv) {
        j[p.split('=')[0]] = p.split('=')[1]
    }
    console.info(j)
    return j;
}
</script>